import React, {memo} from 'react';
import './style/index.css';
import { useScrollPosition } from './hooks'

const Home = memo(() => {
  const [scrollX, scrollY] = useScrollPosition();
  return (
      <div>
        <h2>Home: {scrollY}</h2>
      </div>
  )
})

const About = memo(() => {
  const [scrollX, scrollY] = useScrollPosition();
  return (
      <div>
        <h2>About: {scrollY}</h2>
      </div>
  )
})

const App = memo(() => {
  return (
      <div className='app'>
        <h2>Hello World</h2>
        <Home/>
        <About/>
      </div>
  );
});

export default App;